<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <!-- 页面 -->
    <meta charset="UTF-8">
    <title>商品统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/domain.css">
    <!-- 引入jq -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!-- 引入layui框架 -->
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <!-- 引入xadmin框架 -->
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入请求基准路径 -->
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <!-- <script type="text/javascript" src="./js/domain.js"></script> -->

</head>
<style>
    .layui-row {
        width: 80%;
        margin: 0 auto;
    }

    .layui-table-page {
        text-align: right !important;
    }

    body {
        background-color: #fff !important;
    }

    .user_list1 {
        margin-left: 16px;
        border-left: none !important;
        border-right: none !important;
    }

    .search_choose {
        padding-right: 30px;
    }

    .search_choose .like_span {
        position: relative;
        z-index: 666;
        display: inline-block;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        color: #666;
        text-align: center;
        width: 85px;
        border: 1px solid #cccccc;
        background-color: #fff;
        border-radius: 4px;
    }

    .search_choose1 .like_span {
        position: relative;
        z-index: 666;
        display: inline-block;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        color: #666;
        text-align: center;
        width: 85px;
        border: 1px solid #cccccc;
        background-color: #fff;
        border-radius: 4px;
    }

    .search_choose1 p {
        margin-right: 15px;
    }

    .active_span {
        color: #fff !important;
        background-color: #1abc9c !important;
    }

    .time_choose {
        position: relative;
        z-index: 999;
        width: 180px;
        height: 29px;
        border: 1px solid #cccccc;
        font-size: 14px;
        color: #666;
        padding-left: 6px;
        margin-left: 15px;
    }
</style>

<body>
    <div class="x-nav">
        <!-- <span class="layui-breadcrumb"> -->
        <span class="goods_name">商品统计</span>
        <!-- </span> -->
        <a class=" layui-btn-small goodsRoload" style="line-height:1.6em;margin-top:3px; " onclick="location.reload()"
            title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i> 刷新
        </a>

    </div>

    <!-- 图形化展示列表部分 -->
    <div class="layui-fluid" style="margin-top: -20px;">
        <div class="layui-row" style=" border-top: none;">
            <!-- 数据列表 -->
            <div class="user_list1" style="width: 100%;height: 50px;padding:0 20px;background-color: #f2f2f2;box-sizing: border-box;position: relative;top: 50px;border: 1px solid #cccccc;
                display: flex; align-items: center; justify-content: space-between;">
                <span style="color: #666; ">商品类目销售分析</span>
                <!-- 条件筛选 -->
                <div class="search_choose">
                    <p class="like_span">导出数据</p>
                    <span class="like_span active_span">最近7天</span>
                    <span class="like_span">最近30天</span>
                    <span class="like_span">最近90天</span>
                    <!-- 时间搜索 -->
                    <input type="text" id="test" class="time_choose" placeholder="2020-05-20 ~ 2020-06-10">
                </div>

            </div>
            <div class="layui-card-body ">
                <!-- 表格部分 -->
                <div style="height: 115vh; width: 100%; border: 1px solid #ccc; padding: 60px 15px; padding-bottom: 0;">
                    <!-- <table id="guideListTable" lay-filter="test" style="width: 100%;"></table> -->
                    <!-- 饼状图显示 -->
                    <div id="container" style="width: 100%;height: 460px;"></div>
                    <!-- 列表展示 -->
                    <table id="goodsTable" lay-filter="test" style="width: 100%;margin-top: 15px;"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品销售情况列表展示 -->
    <div class="layui-fluid" style="margin-top: -20px;">
        <div class="layui-row" style=" border-top: none;">
            <!-- 数据列表 -->
            <div class="user_list1"
                style="width: 100%;height: 50px;padding:0 20px;background-color: #f2f2f2;box-sizing: border-box;position: relative;top: 50px;border: 1px solid #cccccc;display: flex;align-items: center; justify-content: space-between;">
                <span style="color: #666; ">商品销售情况</span>
                <div class="search_choose1">
                    <p class="like_span">导出数据</p>
                    <span class="like_span active_span">最近7天</span>
                    <span class="like_span">最近30天</span>
                    <span class="like_span">最近90天</span>
                    <!-- 时间搜索 -->
                    <input type="text" id="test1" class="time_choose" placeholder="2020-05-20 ~ 2020-06-10">
                </div>

            </div>
            <div class="layui-card-body ">
                <!-- 表格部分 -->
                <div style="height: 100vh; width: 100%; border: 1px solid #ccc; padding: 60px 15px; padding-bottom: 0;">
                    <table id="guideListTable" lay-filter="test" style="width: 100%;"></table>


                </div>
            </div>
        </div>
    </div>
    <!-- 图形化展示 -->
    <script>
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '一级分类商品',
                // subtext: '纯属虚构',
                left: 'center'
            },
            // tooltip: {            //轻触提示
            //     trigger: 'item',
            //     formatter: '{a} <br/>{b} : {c} ({d}%)'
            // },
            legend: {
                left: 'center',
                top: 'bottom',
                data: ['彩妆', '留学', '派遣', '玉缘轩', '法律服务', '食品', '餐饮', '酒水', '汽车', '厨具', '家电', '男装', '口腔护理', '洗护', '学习']
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: false,
                        type: ['pie', 'funnel']
                    },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            series: [
                {
                    // name: '半径模式',
                    type: 'pie',
                    radius: [20, 110],
                    center: ['25%', '50%'],
                    // roseType: 'radius',
                    // label: {
                    //     show: false
                    // },
                    // emphasis: {
                    //     label: {
                    //         show: true
                    //     }
                    // },
                    data: [
                        { value: 10, name: '彩妆' },
                        { value: 5, name: '留学' },
                        { value: 15, name: '派遣' },
                        { value: 25, name: '玉缘轩' },
                        { value: 20, name: '法律服务' },
                        { value: 35, name: '食品' },
                        { value: 30, name: '餐饮' },
                        { value: 40, name: '酒水' },
                        { value: 10, name: '汽车' },
                        { value: 5, name: '厨具' },
                        { value: 15, name: '家电' },
                        { value: 25, name: '男装' },
                        { value: 20, name: '口腔护理' },
                        { value: 35, name: '洗护' },
                        { value: 30, name: '学习' }
                    ]
                },
                {
                    // name: '面积模式',
                    type: 'pie',
                    radius: [30, 110],
                    center: ['75%', '50%'],
                    // roseType: 'area',
                    data: [
                        { value: 10, name: '彩妆' },
                        { value: 5, name: '留学' },
                        { value: 15, name: '派遣' },
                        { value: 25, name: '玉缘轩' },
                        { value: 20, name: '法律服务' },
                        { value: 35, name: '食品' },
                        { value: 30, name: '餐饮' },
                        { value: 40, name: '酒水' },
                        { value: 10, name: '汽车' },
                        { value: 5, name: '厨具' },
                        { value: 15, name: '家电' },
                        { value: 25, name: '男装' },
                        { value: 20, name: '口腔护理' },
                        { value: 35, name: '洗护' },
                        { value: 30, name: '学习' }
                    ]
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>

    <script>
        //使用layui的方法
        layui.use(['layedit', 'laydate', 'table', 'form'],
            function () {
                // IsTokenSave();
                // var userMessage = JSON.parse(sessionStorage.getItem("user_message"));
                // console.log(userMessage.token)
                var table = layui.table,
                    form = layui.form,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    laydate = layui.laydate;
                //日期范围选择
                laydate.render({
                    elem: '#test'
                    , range: '~' //或 range: '~' 来自定义分割字符
                    , done: function (value, date, endDate) {  //关闭控件后的回调
                        console.log(value); //得到日期生成的值，如：2017-08-18
                        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, 
                        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    }
                });

                laydate.render({
                    elem: '#test1'
                    , range: '~' //或 range: '~' 来自定义分割字符
                    , done: function (value, date, endDate) {  //关闭控件后的回调
                        console.log(value); //得到日期生成的值，如：2017-08-18
                        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, 
                        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    }
                });




                $(".refresh_a").click(function () { //返回上一页
                    window.history.go(-1);
                });

                // 点击筛选条件
                $('.search_choose span').each(function (i) {
                    $(this).click(function () {
                        $('.search_choose span').removeClass('active_span');
                        $(this).addClass('active_span');

                        if (i == 0) {     //最近七天
                            console.log(0)
                        } else if (i == 1) { //最近30天
                            console.log(1)
                        } else if (i == 2) { //最近90天
                            console.log(2)
                        }
                    })
                })

                $('.search_choose1 span').each(function (i) {
                    $(this).click(function () {
                        $('.search_choose1 span').removeClass('active_span');
                        $(this).addClass('active_span');

                        if (i == 0) {     //最近七天
                            console.log(4)
                        } else if (i == 1) { //最近30天
                            console.log(5)
                        } else if (i == 2) { //最近90天
                            console.log(6)
                        }
                    })
                })

                // 分类的数据列表显示
                table.render({
                    elem: '#goodsTable',
                    // toolbar: '#guideListTableToolbar',
                    id: 'idTest',
                    cellMinWidth: 80,
                    url: urls + 'sales/getSalesList' //数据接口
                    , method: 'get' //如果无需自定义HTTP类型，可不加该参数
                    , headers: {
                        'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                    }
                    , page: true //开启分页
                    , limits: ['10', '5', '10', '12']
                    , limit: 10
                    , parseData: function (res) { //res 即为原始返回的数据
                        //console.log(res)
                        CheckLogout(res);
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.records //解析数据列表
                        }
                    },
                    cols: [
                        [ //表头
                            {
                                field: 'account_phone',
                                title: '分类名称',
                                align: 'center',
                            }, {
                                field: 'nickname',
                                title: '销售数量',
                                sort: true,
                                align: 'center',

                            }, {
                                field: 'sale',
                                // edit: 'text',
                                title: '数量比例',
                                align: 'center',

                            }, {
                                field: 'account_phone',
                                title: '销售金额',
                                align: 'center',
                            }, {
                                field: 'account_phone',
                                title: '金额比例',
                                align: 'center',
                            }
                        ]
                    ],
                    done: function (res, curr, count) {
                        //    重新赋值筛选后的table数量

                    }
                });

                // 商品销售情况的实列
                function init() {
                    //第一个实例（创建table）
                    // console.log(JSON.parse(sessionStorage.getItem("token")))
                    table.render({
                        elem: '#guideListTable',
                        // toolbar: '#guideListTableToolbar',
                        id: 'idTest',
                        cellMinWidth: 80,
                        url: urls + 'sales/getSalesList' //数据接口
                        , method: 'get' //如果无需自定义HTTP类型，可不加该参数
                        , headers: {
                            'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                        }
                        , page: true //开启分页
                        , limits: ['20', '30', '50']
                        , limit: 20
                        , parseData: function (res) { //res 即为原始返回的数据
                            //console.log(res)
                            CheckLogout(res);
                            return {
                                "code": res.code, //解析接口状态
                                "msg": res.msg, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data.records //解析数据列表
                            }
                        },
                        cols: [
                            [ //表头
                                {
                                    field: 'account_phone',
                                    title: '商品名称',
                                    align: 'center',
                                }, {
                                    field: 'nickname',
                                    title: '浏览量',
                                    align: 'center',
                                    sort: true

                                }, {
                                    field: 'sale',
                                    // edit: 'text',
                                    title: '浏览人数',
                                    align: 'center',

                                }, {
                                    field: 'account_phone',
                                    title: '付款人数',
                                    align: 'center',
                                }, {
                                    field: 'account_phone',
                                    title: '单品转化率',
                                    align: 'center',
                                }, {
                                    field: 'account_phone',
                                    title: '销售数量',
                                    align: 'center',
                                }, {
                                    field: 'account_phone',
                                    title: '销售金额',
                                    align: 'center',
                                }
                            ]
                        ],
                        done: function (res, curr, count) {
                            //    重新赋值筛选后的table数量

                        }
                    });
                }
                init();
            })
    </script>
</body>

</html>